 <template>
  <Container>
    <div class="container-header group" slot="header" v-if="tab === 'tab1'">
      <!--  -->
        <Input
            placeholder="出库单查询"
            clearable
            class="start"
            v-model.trim="list.pageData.form.stockOutSn"
            style="width: 200px"
            @on-enter="onSearchBtnClick"/>
        <Button
          type="primary"
          icon="ios-search"
          class="btn-search"
          @click="onSearchBtnClick"
          ></Button>
      </div>
      <!-- 明细 -->
      <div class="container-header group" slot="header" v-else-if="tab == 'tab2'">
        <Input v-model="list.pageData1.form.stockOutSn" class="start" placeholder="出库单编号"/>
        <DatePicker
          format="yyyy-MM-dd"
          type="daterange"
          placement="bottom-start"
          placeholder="选择出库处理时间"
          v-model="list.pageData1.form.date"
          @on-enter="getDetailedData"
        ></DatePicker>
        <Button
          class="btn-search"
          type="primary"
          icon="ios-search"
          @click="getDetailedData()"></Button>
      </div>
      <div class="container-header group" slot="header" v-else-if="tab == 'tab3'">
        <Input
          placeholder="出库单编号查询"
          clearable
          v-model.trim="list.pageData2.form.stockOutSn"
          style="width: 200px"
          class="start"
          @on-enter="onSearchBtnClickThree"/>
          <Button
            type="primary"
            icon="ios-search"
            class="btn-search"
            @click="onSearchBtnClickThree"></Button>
    </div>
    <Tabs v-model="tab">
      <Button 
        size="large"
        type="primary" 
        @click="codeDealwith()" 
        v-if="tab === 'tab1'" 
        slot="extra">条码处理</Button>
      <export-btn 
        :param="exportParam" 
        url="/barcode_process/processExport"
        class="item" 
        slot="extra" 
        v-if="tab === 'tab2'"></export-btn>
      <block v-if="tab === 'tab3'" slot="extra">
        <Button size="large" type="primary" @click="factorySend()">工厂直发</Button>
        <export-btn 
          :param="tab3ExportParam" 
          url="/barcode_process/export"
          class="item"></export-btn>
      </block>
      <TabPane label="出库单处理" name="tab1">
        <Table
          :height="options.tableHeight"
          ref="selection"
          stripe
          @on-selection-change="onSelectChange"
          :columns="list.pageData.columns"
          :data="list.pageData.data"
        >
        </Table>
      </TabPane>
      <TabPane label="出库单处理查询" name="tab2">
        <Table
          :height="options.tableHeight"
          ref="selection"
          stripe
          :columns="list.pageData1.columns"
          :data="list.pageData1.data"
        >
        </Table>
        <PageItem1
          @complete="getDetailedData"
          :totalItem="list.pageData1.total"
          :currentPage="list.pageData1.current">
        </PageItem1>
      </TabPane>
      <TabPane label="出库单条码明细" name="tab3">
        <Table
          :height="options.tableHeight"
          ref="selection"
          stripe
          :columns="list.pageData2.columns"
          :data="list.pageData2.data">
        </Table>
        <PageItem1
          @complete="getTabThreeDate"
          :totalItem="list.pageData2.total"
          :currentPage="list.pageData2.current"
        >
        </PageItem1>
      </TabPane>
    </Tabs>
    <Loader :status="list.pageData.status" @refresh="getData"></Loader>
    <Loader :status="list.pageData1.status" @refresh="getDetailedData"></Loader>
    <Loader :status="list.pageData2.status" @refresh="getTabThreeDate"></Loader>
  </Container>
</template>
<script>
import listData from "./list/CodeDisposeData";
import table from "@/table";
import PageItem from "./edit/CodeDisposeEdit";
import PageItem1 from "./edit/CodeDisposeEdit";
import { mapGetters } from "vuex";
import { clearEmpty, formatMonth, formatDate } from "@/util";
import data from "../../manage/public/list/StoreListData";
export default {
  name: "operation/codeDispos/list",
  components: {
    PageItem,
    PageItem1,
  },
  data() {
    return {
      tab: "tab1",
      list: listData,
      ids: [],
      tab3ParamData:{
        id:''
      },
      options: {
        tableHeight: 300,
      },
    };
  },
  mounted() {
    this.list.pageData1.current = ~~this.$route.query.currentPage || 1
    this.list.pageData1.size = ~~this.$route.query.pageSize || 20
    this.initTable();
    this.getDetailedData();
    this.getTabThreeDate();
    this.$bus.$on("onDetail", ({ item }) => this.onDetail(item));
  },
  destroyed() {
    this.$bus.$off();
  },
  methods: {
    ...table,
    // 点击条码查询s
    onSearchBtnClick() {
      if (this.list.pageData.form.stockOutSn === "") {
        this.$Message.error("请输入出库单进行查询");
        return;
      }
      this.getData();
    },
    onSearchBtnClickThree() {
      // if (this.list.pageData2.form.stockOutSn == "") {
      //   this.$Message.error("请输入出库单进行查询");
      //   return;
      // }
      this.tab3ParamData.id =''
      this.getTabThreeDate();
    },
    onSelectChange(selection) {
      this.ids = selection.map((item) => item.id);
    },
    codeDealwith() {
      if (this.ids.length == 0) {
        this.$Message.error("请选择要处理的的出库单");
        return;
      }
      let param = {
        ids: this.ids,
        stockOutSn: this.list.pageData.form.stockOutSn,
      };
      this.$Modal.confirm({
        title: "警告",
        content: "确定需要将选中单号处理成测试经销商门店已出库吗？",
        onOk: () => {
          this.$ajaxPost("/barcode_process/processBarcode", param).then(() => {
            this.$Notice.success({
              title: "修改成功",
            });
            this.getData();
          });
        },
      });
    },
    factorySend() {
      if (this.list.pageData2.form.stockOutSn === "") {
        this.$Message.error("请输入需要直发的出库单号");
        return;
      }
      let param = {
        stockOutSn: this.list.pageData2.form.stockOutSn,
      };
      this.$Modal.confirm({
        title: "警告",
        content: "确定需要将选中的出库单号处理成工厂直发吗？",
        onOk: () => {
          this.$ajaxPost("/barcode_process/factoryDirect", param).then(() => {
            this.$Notice.success({
              title: "直发成功",
            });
            this.getTabThreeDate();
          });
        },
      });
    },
    getData(p) {
      let url = "/barcode_process/findByStockOutSn";
      let params = {
        stockOutSn: this.list.pageData.form.stockOutSn || "",
      };
      params = clearEmpty(params);
      this.list.pageData.status = "loading";
      this.$ajaxPost(url, params).then((res) => {
        this.list.pageData.status = "pass";
        this.list.pageData.data = res;
      }).catch(()=>{
        this.list.pageData.status = "pass";
      })
    },
    getDetailedData(p) {
      if (p && p.type == "current") this.list.pageData1.current = p.val;
      if (p && p.type == "size") this.list.pageData1.size = p.val;
      let url = "/barcode_process/page";
      let params = {
        current: this.list.pageData1.current,
        size: this.list.pageData1.size,
        stockOutSn: this.list.pageData1.form.stockOutSn
      };
       if (this.list.pageData1.form.date[0] && this.list.pageData1.form.date[1] && this.list.pageData1.form.date.length === 2) {
        params.beginDate = formatDate(this.list.pageData1.form.date[0]) + ' 00:00:00'
        params.endDate = formatDate(this.list.pageData1.form.date[1]) + ' 23:59:59'
      }
      params = clearEmpty(params);
      this.list.pageData1.status = "loading";
      this.$ajaxGet(url, params).then((res) => {
        this.list.pageData1.status = "pass";
        this.list.pageData1.data = res.records;
        this.list.pageData1.total = Number(res.total);
      });
    },
    getTabThreeDate(p) {
      if (p && p.type == "current") this.list.pageData2.current = p.val;
      if (p && p.type == "size") this.list.pageData2.size = p.val;
      let url = "/barcode_process/barcode_page";
      let params = {
        current: this.list.pageData2.current,
        size: this.list.pageData2.size,
        barcodeProcessId: this.tab3ParamData.id ,
        stockOutSn:  this.tab3ParamData.id ? '' : this.list.pageData2.form.stockOutSn,
      };
      params = clearEmpty(params);
      this.list.pageData2.status = "loading";
      this.$ajaxGet(url, params).then((res) => {
        this.list.pageData2.status = "pass";
        this.list.pageData2.data = res.records;
        this.list.pageData2.total = Number(res.total);
      });
    },
    seeBarcode() {
      let url = "/barcode_process/barcode_page";
      let params = {
        current: 1,
        size: 20,
        barcodeProcessId: this.tab3ParamData.id
      };
      params = clearEmpty(params);
      this.list.pageData2.status = "loading";
      this.$ajaxGet(url, params).then((res) => {
        this.list.pageData2.status = "pass";
        this.list.pageData2.data = res.records;
        this.list.pageData2.total = Number(res.total);
      });
    },
    onDetail(row) {
      this.tab = "tab3";
      this.$router.push({
        name: "operation/codeDispose/CodeDisposeList",
      });
      this.tab3ParamData.id = row.id
      this.seeBarcode()
    },
  },
  computed: {
    exportParam() {
      let params = {
        current: this.list.pageData1.current,
        size: this.list.pageData1.size,
        stockOutSn: this.list.pageData1.form.stockOutSn
      };
      if (this.list.pageData1.form.date[0] && this.list.pageData1.form.date[1] && this.list.pageData1.form.date.length === 2) {
        params.beginDate = formatDate(this.list.pageData1.form.date[0]) + ' 00:00:00'
        params.endDate = formatDate(this.list.pageData1.form.date[1]) + ' 23:59:59'
      }
      params = clearEmpty(params)
      return params
    },
    tab3ExportParam() {
      let params = {
        current: this.list.pageData2.current,
        size: this.list.pageData2.size,
        barcodeProcessId: this.tab3ParamData.id,
        stockOutSn: this.list.pageData2.form.stockOutSn || "",
      }
      return params
    }
  },
  watch: {
    tab(val) {
      let height = 0;
      if (val === "tab1") {
        // height = 40
      } else {
        // height = 40
      }
      this.initTable(height);
    }
  }
};
</script>
